import { Outlet } from "react-router-dom";
import { Menu } from "antd";
import { useNavigate } from "react-router-dom";
import {
  AppstoreOutlined,
  HomeOutlined,
  PoweroffOutlined,
} from "@ant-design/icons";
import { useState,useEffect } from "react";
import "../pages/nav.css";
import myAxios from "../utils/myAixos"
import Password from "antd/es/input/Password";
//发起请求的引入  必须引入
// import axios from "../utils/myAixos";
const items = [
  {
    key: "系统首页",
    name: "系统首页",
    icon: <AppstoreOutlined />,
    label: "系统首页",
    children: [
      {
        key: "经营概况",
        name: "经营概况",
        icon: <AppstoreOutlined />,
        label: "经营概况",
      },
      {
        key: "账号资料",
        icon: <AppstoreOutlined />,
        label: "账号资料",
      },
      {
        key: "预约记录",
        icon: <AppstoreOutlined />,
        label: "预约记录",
      },
    ],
  },
  {
    key: "用户管理",
    icon: <AppstoreOutlined />,
    label: "用户管理",
    children: [
      { key: "会员列表", icon: <AppstoreOutlined />, label: "会员列表" },
      { key: "会员等级", icon: <AppstoreOutlined />, label: "会员等级" },
      { key: "会员卡", icon: <AppstoreOutlined />, label: "会员卡" },
      { key: "教练列表", icon: <AppstoreOutlined />, label: "教练列表" },
    ],
  },
  {
    key: "商城管理",
    icon: <AppstoreOutlined />,
    label: "商城管理",
    children: [
      { key: "商品列表", icon: <AppstoreOutlined />, label: "商品列表" },
      { key: "商品分类", icon: <AppstoreOutlined />, label: "商品分类" },
      { key: "商品订单", icon: <AppstoreOutlined />, label: "商品订单" },
    ],
  },
  {
    key: "课程管理",
    icon: <AppstoreOutlined />,
    label: "课程管理",
    children: [
      { key: "团课管理", icon: <AppstoreOutlined />, label: "团课管理" },
      { key: "私教管理", icon: <AppstoreOutlined />, label: "私教管理" }
    ],
  },
  {
    key: "场馆管理",
    icon: <AppstoreOutlined />,
    label: "场馆管理",
    children: [
      { key: "场馆列表", icon: <AppstoreOutlined />, label: "场馆列表" },
    ],
  },
  {
    key: "活动管理",
    icon: <AppstoreOutlined />,
    label: "活动管理",
    children: [{ key: "优惠劵", icon: <AppstoreOutlined />, label: "优惠劵" }],
  },
  {
    key: "系统管理",
    icon: <AppstoreOutlined />,
    label: "系统管理",
    children: [
      { key: "成员管理", icon: <AppstoreOutlined />, label: "成员管理" },
      { key: "角色管理", icon: <AppstoreOutlined />, label: "角色管理" },
      { key: "广告管理", icon: <AppstoreOutlined />, label: "广告管理" },
      { key: "公告管理", icon: <AppstoreOutlined />, label: "公告管理" },
      { key: "系统配置", icon: <AppstoreOutlined />, label: "系统配置" },
    ],
  },
];

// submenu keys of first level
const rootSubmenuKeys = [
  "系统首页",
  "用户管理",
  "商城管理",
  "课程管理",
  "场馆管理",
  "活动管理",
  "系统管理",
];
const HomePage = () => {
  let [adminName,setAdminName]=useState([])
  let [adminSrc,setAdminSrc]=useState([])
  const [openKeys, setOpenKeys] = useState(["系统首页"]);
//获取当前管理员的信息
     useEffect(()=>{
          myAxios({
             url:"/getAdminData",
             method:"post"
          
          }).then(res=>{
            
             setAdminName( res.data.data[0].a_name)
             setAdminSrc(res.data.data[0].a_src)
          })      
         
     },[adminName,adminSrc])

  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
    // console.log(keys)
  };
  //切换路由的跳转专用函数
  const [topTitle, setTopTitle] = useState("经营概况");
  const navigate = useNavigate();
  const getNavKey = (value) => {
    setTopTitle(value.key);
    if (value.key === "广告管理") {
      navigate("Advertisement");
    } else if (value.key === "公告管理") {
      navigate("Announcement");
    } else if (value.key === "经营概况") {
      navigate("BusinessOverview");
    } else if (value.key === "成员管理") {
      navigate("MemberManagement");
    } else if (value.key === "角色管理") {
      navigate("RoleManagement");
    } else if (value.key === "场馆列表") {
      navigate("venue");
    } else if (value.key === "会员列表") {
      navigate("Memberlist");
    } else if (value.key === "会员等级") {
      navigate("MemberGrade");
    } else if (value.key === "会员卡") {
      navigate("MemberCart");
    } else if (value.key === "教练列表") {
      navigate("CoachList");
    } else if (value.key === "团课管理") {
      navigate("group");
    } else if (value.key === "私教管理") {
      navigate("personal");
    }  else if (value.key === "商品分类") {
      navigate("ShopClass");
    } else if (value.key === "账号资料") {
      navigate("Admin");
    }
    else if (value.key === "商品列表") {
      navigate("ShopList");
    }
    else if (value.key === "商品列表") {
      navigate("ShopList");
    }
    else if (value.key === "预约记录") {
      navigate("yuyuejl");
    }
    
    //发请求的方式
    // axios({
    //   url: "/getBannerList",
    //   method: "post",
    // })
    //   .then((res) => {
    //     console.log("获取所有学生数据", res);
    //     if (res.code === 200) {
    //       console.log("1111");
    //     }
    //   })
    //   .catch((err) => {
    //     console.log("获取所有学生数据1111", err);
    //   });
  };
  //内容标题

  //获取当前时间
  const [times, setTimes] = useState("");
  const dataTime = () => {
    const time = new Date();
    let hours = time.getHours();
    let seconds = time.getSeconds();
    let minutes = time.getMinutes();
    let dataTimes = hours + ":" + minutes + ":" + seconds;
    setTimes(dataTimes);
  };

  setInterval(() => {
    dataTime();
  }, 1000);
  const changeColor = () => {
    // let myNav=document.getElementsByClassName("myNav")[0];
    // myNav.style.color="red"
  };
  const getHomePage=()=>{
    navigate("BusinessOverview");
    setTopTitle("经营概况");
  }
  const Exit=()=>{
    console.log(localStorage.getItem("password"))
    myAxios({
      url:"/exit",
      method:"post",
      data:{
         a_password:localStorage.getItem("password")
      }
    })
    navigate("/Login"); 
  }
  return (
    <div
      style={{
        width: "100%",
        height: "110%",
        display: "flex",
        justifyContent: "space-around",
      }}
    >
      <div style={{ width: "15%" }}>
        <div
          style={{
            height: "20%",
            overflow: "hidden",
            backgroundColor: "#233545",
            // borderRadius: "0px 10px 0px 0px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-around",
            alignItems: "center",
          }}
        >
          <div
            style={{
              width: "80px",
              height: "80px",
              borderRadius: "50%",
              backgroundColor: "white",
              marginTop: "8px",
              position: "relative",
            }}
          >
            <img
              src={"/api"+adminSrc}
              style={{ width: "80px", height: "80px", borderRadius: "50%" }}
              alt=""
            />
            <div style={{ position: "absolute", top: "0px", left: "120px" }} onClick={getHomePage}>
              <HomeOutlined style={{ color: "#969ea6", fontSize: "20px" }} />
            </div>
          </div>
          <div style={{ color: "white" }}>{adminName}</div>
          <div style={{ color: "white", fontWeight: 800, marginBottom: "4px" }}>
            {times}
          </div>
        </div>
        <Menu
          className="myNav"
          mode="inline"
          onMouseOver={changeColor}
          openKeys={openKeys}
          onOpenChange={onOpenChange}
          onClick={getNavKey}
          style={{
            width: "100%",
            height: "80%",
            textAlign: "center",
            overflowY: "scroll",
            inlineIndent: 0,
            //   textIndent:"-10px",
            successColor: "#52c41a",
            backgroundColor: "#2f4050",
            color: "#888b8d",
            fontWeight: 800,
          }}
          items={items}
        />
      </div>

      <div style={{ width: "84%", height: "100%", marginLeft: "1%" }}>
        <div
          style={{
            width: "100%",
            height: "8%",
            borderRadius: "5px 0px 0px 0px",
            backgroundImage: " linear-gradient(to right, #535353 , #aeaeae)",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            // borderRadius: "10px 0px 0px 0px",
          }}
        >
          <div style={{ display: "flex", flexDirection: "row", width: "100%" }}>
            <div
              style={{
                height: "28px",
                width: "4px",
                backgroundColor: "#1e9fff",
                marginLeft: "2.5%",
              }}
            ></div>
            <div
              style={{
                marginLeft: "10px",
                color: "#999999",
                fontWeight: "800",
              }}
            >
              {topTitle}
            </div>
          </div>
          <div style={{ marginRight: "50px" }} onClick={Exit}>
            <PoweroffOutlined style={{ fontSize: "20px", color: "#e6e6e6" }} />
          </div>
        </div>
        <div
          style={{
            width: "100%",
            height: "92%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "#f2f2f2",
          }}
        >
          <div
            style={{
              width: "95%",
              height: "90%",
              backgroundColor: "white",
              boxShadow: ".5px .5px .5px .5px #f2f2f2 ",
              borderRadius: "8px 8px 0px 0px",
            }}
          >
            <Outlet></Outlet>
          </div>
        </div>
      </div>
    </div>
  );
};
export default HomePage;
